<template>
  <div class="login-container">
    <!-- 背景 -->
    <div class="login-bg"></div>
    
    <!-- 登录框容器 -->
    <div class="login-content">
      <!-- Logo -->
      <div class="logo-container" @click="backToHome">
        <img src="@/assets/logo.png" alt="Logo" class="login-logo" />
        <p class="logo-tip">点击Logo返回首页</p>
      </div>
      
      <!-- 标题 -->
      <h2 class="login-title">{{ pageTitle }}</h2>

      <!-- 登录框组件 -->
      <LoginBox 
        v-if="status === 'login'" 
        ref="loginBox"
        @switchType="switchType"
        @handleLogin="handleLogin"
      />

      <!-- 注册框组件 -->
      <RegisterBox 
        v-if="status === 'register'"
        @switchType="switchType"
        @handleLogin="handleLogin"
      />

      <!-- 忘记密码组件 -->
      <ForgetPassword 
        v-if="status === 'forget'"
        @switchType="switchType"
      />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import LoginBox from '@/components/login/LoginBox.vue'
import RegisterBox from '@/components/login/RegisterBox.vue'
import ForgetPassword from '@/components/login/ForgetPassword.vue'
import { loginByUsername, getUserInfo, getPublicKey } from '@/api/auth'
import JsEncrypt from 'jsencrypt'

export default defineComponent({
  name: 'Login',

  components: {
    LoginBox,
    RegisterBox,
    ForgetPassword
  },

  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    // 根据路由参数设置初始状态
    const status = ref(route.query.status || 'login')

    // 动态页面标题
    const pageTitle = computed(() => {
      switch (status.value) {
        case 'register':
          return '用户注册'
        case 'forget':
          return '找回密码'
        default:
          return '用户登录'
      }
    })

    // 监听路由变化
    watch(
      () => route.query.status,
      (newStatus) => {
        if (newStatus) {
          status.value = newStatus
        }
      }
    )

    // 处理登录
    const handleLogin = async (data) => {
      try {
        // 获取加密公钥
        const { data: { data: publicKey } } = await getPublicKey()
        
        // RSA加密
        const RSA = new JsEncrypt()
        RSA.setPublicKey(publicKey)
        const params = {
          ...data,
          password: RSA.encrypt(data.password),
          publicKey
        }

        // 登录请求
        const res = await loginByUsername(params)
        
        // 保存token
        store.commit('SET_TOKEN', res.data.access_token)
        
        // 获取用户信息
        const userInfo = await getUserInfo()
        store.commit('SET_USER_INFO', userInfo.data.data.sysUser)

        router.push('/')
      } catch (error) {
        // 刷新验证码
        loginBox.value?.refreshCode()
      }
    }

    // 切换状态
    const switchType = (type) => {
      status.value = type
      router.push({
        path: '/login',
        query: { status: type }
      })
    }

    // 返回首页
    const backToHome = () => {
      router.push('/')
    }

    return {
      status,
      pageTitle,
      handleLogin,
      switchType,
      backToHome
    }
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $background-color-light; /* 使用项目的背景色变量 */
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom right, $primary-color, darken($primary-color, 10%));
  opacity: 0.8;
  z-index: 0;
}

.login-content {
  position: relative;
  z-index: 1;
  width: 400px;
  padding: 40px;
  background: $background-color-white; /* 使用项目的白色背景变量 */
  border-radius: $border-radius-large; /* 使用项目的圆角变量 */
  box-shadow: $box-shadow-base; /* 使用项目的阴影变量 */
}

.logo-container {
  text-align: center;
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  margin-bottom: $spacing-large; /* 使用项目的间距变量 */
}

.login-logo {
  width: 100px; /* 设置logo的宽度 */
  margin-bottom: 10px; /* logo与提示文本之间的间距 */
}

.logo-tip {
  font-size: $font-size-small; /* 使用项目的字体大小变量 */
  color: $text-secondary; /* 使用项目的次要文字颜色变量 */
}

.login-title {
  text-align: center;
  font-size: $font-size-extra-large; /* 使用项目的字体大小变量 */
  color: $text-primary; /* 使用项目的主文字颜色变量 */
  margin-bottom: $spacing-large; /* 使用项目的间距变量 */
}
</style> 